<!--
 * @Descripttion:
 * @version:
 * @Author: ybac
 * @Date: 2022-10-31 17:46:47
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2023-07-03 15:46:54
-->
<template>
  <div class="home-wrap">
    <div class="cardBox">
      <div class="cardOne">
        <a-card :bordered="false">
          <!-- <a-tree :tree-data="departmentTree" @select="onClickTree">
            <div slot="title" slot-scope="record" :style="{ backgroundColor: departId == record.id ? '#bae7ff' : '' }">
              {{ `${record.title}` }}{{ record.userTotal ? `(${record.userTotal})人` : '' }}
            </div>
          </a-tree> -->
          <a-tree :tree-data="departmentTree" @select="onClickTree">
            <div slot="title" slot-scope="record"
              :style="{ backgroundColor: defaultSelectedKeys == record.sid ? '#bae7ff' : '' }">
              {{ record }}
              <!-- {{ `${record.title}` }}{{ record.userTotal ? `(${record.userTotal})人` : '' }} -->
            </div>
          </a-tree>
        </a-card>
      </div>
      <div class="cardTwo">
        <a-card :bordered="false" :bodyStyle="computedWidth">
          <a-button @click="handleShowFilter" icon="filter">筛选 <span class="filter-num" style="margin-left: 5px">{{ ' '
            + filteredNums }}</span></a-button>
          <a-button @click="showColumn" icon="unordered-list" class="btns">设置列</a-button>
          <div class="right-btn">
            <!-- <a-button type="primary" style="margin-right: 10px" :loading="syncLoading" @click="synchronization" v-if="platform=='5'">同步钉钉组织</a-button> -->
            <PubImport @updateParentData="initPageInfo" ref="PubImport" :formType="this.formType"
              tableCode="MESS_PRODUCT_FLOW" modelName="用户导入模板" style="margin-right: 10px"
               />
            <a-button @click="beforeExport" style="margin-right: 10px">导出</a-button>
            <a-button type="primary" @click="onClickAdd" v-if="platform != '5'"> +新建 </a-button>
          </div>
          <a-table row-key="id" :key="tableKey" size="small" :scroll="{ x: computedX, y: 'calc(100vh - 300px)' }"
            :hideDefaultSelections="false" :columns="columns" :dataSource="tableData" :pagination="false"
            @change="tableChange" :row-selection="rowSelection" :components="drag(columns, 'USER_MANAGEMENT')"
            class="jek-table" :loading="loadingTable">
            <div slot="actions" slot-scope="text, record">
              <a-button type="link" @click="showRole(record)">角色授权</a-button>
              <a-dropdown v-if="platform != '5'">
                <a class="ant-dropdown-link" @click="(e) => e.preventDefault()">更多</a>
                <a-menu slot="overlay">
                  <a-menu-item>
                    <a-button type="link" @click="resetPassword(record.id)">密码重置</a-button>
                  </a-menu-item>
                  <a-menu-item>
                    <a-button type="link" @click="onClickEdit(record)">编辑</a-button>
                  </a-menu-item>
                  <a-menu-item>
                    <a-button type="link" @click="onClickDelete(record)">删除</a-button>
                    <!-- <a-popconfirm placement="top" ok-text="确认" cancel-text="取消" @confirm="onClickDelete(record.id)">
                      <template slot="title">
                        <span>确定删除吗？</span>
                      </template>
<div class="btn-text" style="margin-left: 15px; line-height: 32px">删除</div>
</a-popconfirm> -->
                  </a-menu-item>
                </a-menu>
              </a-dropdown>
            </div>
            <!-- 输入框搜索 -->
            <div slot="searchInput" slot-scope="{ column }" class="searchWorkOreder">
              <a-input placeholder="请输入" v-model="filterForm[column.searchKey]" style="width: 188px; display: block"
                @pressEnter="handleFilter(filterForm)" />
              <a-button type="primary" style="width: 80px; margin-left: 20px; display: block"
                @click="handleFilter(filterForm)">
                搜索
              </a-button>
            </div>
            <a-icon slot="searchIcon" slot-scope="filtered" type="search"
              :style="{ color: filtered ? '#108ee9' : undefined }" />
            <!-- 选择搜索 -->
            <div slot="selectDropdown" slot-scope="{ column }" class="searchWorkOreder">
              <j-select-multiple placeholder="请选择" style="width: 188px" v-model="filterForm[column.searchKey]"
                :options="selectList(column.searchKey)" :optionLabel="column.optionLabel"
                :optionValue="column.optionValue" v-if="column.searchKey == 'roleSids'" />
              <a-select placeholder="请选择" allowClear style="width: 188px" v-model="filterForm[column.searchKey]" v-else>
                <a-select-option v-for="op in selectList(column.searchKey)" :value="op.value" :key="op.value">
                  {{ op.text }}
                </a-select-option>
              </a-select>
              <a-button type="primary" style="width: 80px; margin-left: 20px; display: block"
                @click="handleFilter(filterForm)">
                搜索
              </a-button>
            </div>
            <a-icon slot="selectIcon" slot-scope="filtered" type="filter"
              :style="{ color: filtered ? '#108ee9' : undefined }" />
            <div slot="status" slot-scope="text, record">
              <a-switch :disabled="(loadingRowKey != null && loadingRowKey != record.id) || platform == '5'"
                :loading="loadingRowKey === record.id" :checked="text == 1" @click="handelChangeStatus(record)" />
            </div>
          </a-table>
          <SetColumn columnName="设置列" ref="SetColumn" v-if="showSetColumn" @sureBtn="sureBtn"
            @cancelBtn="showSetColumn = false" />
        </a-card>
      </div>
    </div>
    <search-modal ref="searchModal" @handleFilter="handleFilter" :roleList="roleList"></search-modal>
    <div class="uni-card pagination-contian" :style="{ left: collapsed ? '219px' : '90px' }">
      <div class="check-contain" v-if="platform == '5'">
        <span style="margin-left: 8px"> 共{{ pagination.total }}条 </span>
      </div>
      <div class="check-contain" v-else>
        <a-checkbox :indeterminate="listIndeterminate" :checked="listCheckAll" @change="onCheckAllChange"></a-checkbox>
        <span style="margin-left: 8px">
          <span class="btn-text" style="margin: 0 7px" @click="resetPassword()">密码重置</span>
          <span class="btn-text" style="margin: 0 18px" @click="onClickDeleteBatch">删除</span>
          {{ `已选 ${selectedRowKeys.length}/${pagination.total} 项` }}
        </span>
        <span class="btn-text" @click="clearArr" style="margin: 0 10px">清空</span>
      </div>
      <div class="page-contain">
        <a-pagination :total="pagination.total" v-model="pagination.current" :page-size-options="pagination.options"
          :page-size="pagination.pageSize" @change="onChangePage" @showSizeChange="onChangePage" show-quick-jumper
          show-size-changer />
      </div>
    </div>
    <form-page ref="formPage" :tenantData="tenantData" @success="refresh"></form-page>
    <!-- 角色授权-单选 -->
    <a-modal :width="800" v-model="singgleRoleVisible" @ok="setRole" @cancel="cancelRoleSinggle" :closable="true"
      :confirmLoading="confirmLoading" title="角色授权">
      <a-row :gutter="[48, 48]">
        <a-col :span="6"><span class="secondary-text">请勾选角色进行授权</span></a-col>
      </a-row>
      <div style="width: 100%; height: 400px; overflow-y: scroll; overflow-x: hidden">
        <a-checkbox-group v-model="boxGroup" style="width: 100%">
          <a-row :gutter="[48, 48]">
            <a-col :span="6" v-for="role in roleList" :key="role.id">
              <a-checkbox :value="role.id" :key="role.id"> {{ role.roleName }} </a-checkbox>
            </a-col>
          </a-row>
        </a-checkbox-group>
      </div>
    </a-modal>
    <!-- 用户导出 全部/指定 -->
    <a-modal v-model="exportExcelVisible" title="导出用户" on-ok="handleOk">
      <template slot="footer">
        <a-button key="back" @click="handleExportXls(false)"> 选定数据 </a-button>
        <a-button key="submit" type="primary" @click="handleExportXls(true)"> 全部数据 </a-button>
      </template>
      <p>请选择导出数据范围</p>
    </a-modal>
  </div>
</template>

<script>
import { getNewColumns } from '@/utils/util'
import SetColumn from '@/pubComponent/SetColumn.vue'
import tableDragResize from '@/mixins/tableDragResize'
import { downFile } from '@/api/manage'
import formPage from './form.vue'
import { hasButton } from '@/utils/hasPermission'
// import AttachmentImport from '@/components/attachments/import'
import moment from 'moment'
import searchModal from './searchModal.vue'
import { columnsValue } from './column'
import { mapState } from 'vuex'
import { getAction, deleteAction, postAction, putAction } from '@/api/manage'
import PubImport from '@comp/pubBtn/PubImport.vue'
const actionArr = [
  {
    fixed: 'right',
    title: '操作',
    width: 150,
    dataIndex: 'actions',
    ellipsis: true,
    scopedSlots: { customRender: 'actions' },
  },
]
// const setTreeData = (list, arr) => {
//   for (let i = 0; i < list.length; i++) {
//     const item = list[i];
//     if (item.userTotal) {
//       item.title = `${item.title}(${item.userTotal})人`
//     }
//     arr.push(item)
//     if (item.children&&item.children.length>0) {
//       setTreeData(item.children, arr)
//     }
//   }
// }
const setTreeData = (list) => {
  for (let i = 0; i < list.length; i++) {
    const item = list[i]
    if (item.userTotal) {
      item.title = `${item.title}(${item.userTotal})人`
    }
    if (item.children && item.children.length > 0) {
      setTreeData(item.children)
    }
  }
}
export default {
  name: 'userList',
  mixins: [tableDragResize],
  components: {
    PubImport,
    SetColumn,
    formPage,
    searchModal,
  },
  data() {
    return {
      formType: '12',
      tenantIdExport: '', //导入导出用tenantId
      moment,
      url: {
        exportXlsUrl: '/sys/user/exportsysUserXls',
      },
      tableKey: 1.9,
      columnsValue,
      columns: JSON.parse(JSON.stringify(columnsValue)),
      tableData: [],
      departmentTree: [],
      pagination: {
        current: 1,
        pageSize: 10,
        options: ['10', '20', '30', '40', '50'],
        total: 0,
      },
      filterForm: {},
      sortForm: {},
      showSetColumn: false,
      selectedRowKeys: [],
      selectedRows: [],
      listCheckAll: false,
      listIndeterminate: false,
      loadingRowKey: null,
      departVisible: false,
      roleVisible: false,
      singgleRoleVisible: false,
      confirmLoading: false,
      modalForm: this.$form.createForm(this, { name: 'coordinated' }),
      loadingTable: false,
      tenantData: [],
      tenantId: '',
      departId: '',
      dataByTenant: true,
      roleList: [],
      boxGroup: [],
      userRecord: [],
      oldRoleSids: [],
      platform: null,
      syncLoading: false,
      exportExcelVisible: false,
    }
  },
  created() {
    this.tenantId = this.$store.getters.tenantid
    this.tenantIdExport = this.$store.getters.tenantid
    var oldValue = localStorage.getItem(this.BUSI_CONST.Entity.USER_MANAGEMENT)
    this.columns = getNewColumns(this.columnsValue, JSON.parse(oldValue), actionArr, this.columns)
    if (this.$route.query.departId) {
      this.departId = this.$route.query.departId
    }
    this.initPageInfo()
  },
  computed: {
    ...mapState({
      collapsed: (state) => state.user.collapsedAno,
    }),
    computedX() {
      let xnum = 0
      for (let item of this.columns) {
        xnum += Number(item.width)
      }

      return xnum
    },
    computedWidth() {
      let str = {}
      if (this.collapsed) {
        str.width = 'calc(100vw - 475px)'
      } else {
        str.width = 'calc(100vw - 340px)'
      }
      return str
    },
    filteredNums() {
      let nums = 0
      for (let key in this.filterForm) {
        if (this.filterForm[key]) {
          nums += 1
        }
      }
      return nums
    },
    scrollX() {
      let xnum = 0
      for (let item of this.columns) {
        xnum += Number(item.width) || 0
      }
      return xnum
    },
    rowSelection() {
      if (this.platform == '5') {
        return null
      }
      return {
        // { selectedRowKeys: selectedRowKeys, onChange: onSelectChange, fixed: true }
        onChange: (selectedRowKeys, selectedRows) => {
          this.onSelectChange(selectedRowKeys, selectedRows)
        },
        selectedRowKeys: this.selectedRowKeys,
        fixed: true,
      }
    },
  },
  methods: {
    hasButton,
    synchronization() {
      this.syncLoading = true
      getAction('/sys/thirdApp/sync/toLocal')
        .then((res) => {
          if (res.code == 200) {
            this.$antdMessage.success(res.message)
            this.requestData()
            this.getTenantList()
          } else {
            this.$antdMessage.error(res.message)
          }
        })
        .finally(() => {
          this.syncLoading = false
        })
    },
    // 角色授权-单选
    setRole() {
      this.confirmLoading = true
      postAction('/sys/user/addSysRoleUser', {
        userSids: this.userRecord,
        roleSids: this.boxGroup,
        oldRoleSids: this.oldRoleSids,
      })
        .then((res) => {
          if (res.code == 200) {
            this.requestData()
            this.$antdMessage.success('角色授权成功')
          } else {
            this.$antdMessage.error(res.message)
          }
          this.confirmLoading = false
        })
        .catch((err) => {
          this.confirmLoading = false
        })
      this.singgleRoleVisible = false
    },
    // 取消角色授权-单选
    cancelRoleSinggle(v) {
      this.singgleRoleVisible = false
    },
    // 打开角色授权弹窗-单选
    showRole(v) {
      this.boxGroup = []
      this.userRecord = [v.id]
      getAction('/sys/user/queryUserRole', { userid: v.id }).then((res) => {
        if (res.code == 200) {
          this.boxGroup = res.result || []
          this.oldRoleSids = res.result || []
        }
      })
      this.singgleRoleVisible = true
    },
    beforeExport() {
      this.exportExcelVisible = true
    },
    handleExportXls(isExportAll) {
      let fileName = `用户管理(${moment().format('YYYY-MM-DD HH:mm')})`
      let param = {
        fileName: fileName,
        ...this.filterForm,
        ...this.sortForm,
        tenantId: this.tenantIdExport,
      }

      if (!isExportAll) {
        if (this.selectedRows && this.selectedRows.length > 0) {
          param['selectedList'] = this.selectedRows
        } else {
          this.$antdMessage.info('请选择数据！')
          return
        }
      } else {
        param['selectedList'] = null
      }

      if (this.columns && this.columns.length > 0) {
        let filedKeys = this.columns.map((item) => {
          if (item.dataIndex == 'status') {
            return 'statusText'
          }
          return item.dataIndex
        })
        param['filedKeys'] = filedKeys.join(',')
      } else {
        param['filedKeys'] = ''
      }

      downFile(this.url.exportXlsUrl, param, 'post')
        .then((data) => {
          if (!data) {
            this.$antdMessage.warning('文件下载失败')
            return
          }
          if (typeof window.navigator.msSaveBlob !== 'undefined') {
            window.navigator.msSaveBlob(new Blob([data], { type: 'application/vnd.ms-excel' }), fileName + '.xls')
          } else {
            let url = window.URL.createObjectURL(new Blob([data], { type: 'application/vnd.ms-excel' }))
            let link = document.createElement('a')
            link.style.display = 'none'
            link.href = url
            link.setAttribute('download', fileName + '.xls')
            document.body.appendChild(link)
            link.click()
            document.body.removeChild(link) //下载完成移除元素
            window.URL.revokeObjectURL(url) //释放掉blob对象
          }
        })
        .catch((err) => {
          this.$antdMessage.error('文件下载失败')
        })
        .finally(() => {
          this.exportExcelVisible = false
        })
    },
    selectList(key) {
      if (key == 'roleSids') {
        return this.roleList
      } else {
        return [
          { value: '2', text: '禁用' },
          { value: '1', text: '启用' },
        ]
      }
    },
    // 导入
    handleImportExcel() { },
    // 增
    onClickAdd() {
      this.$refs.formPage.open()
    },
    // 删
    onClickDelete(record) {
      if (record.id) {
        let that = this
        that.$antdConfirm({
          title: `确定要删除用户 ${record.realname} 吗?`,
          onOk() {
            deleteAction('/sys/user/deleteRecycleBin', { userIds: record.id }).then((res) => {
              if (res.code == 200) {
                that.$antdMessage.success('删除成功！')
                that.clearArr()
                that.refresh()
              } else {
                that.$antdMessage.error(res.message)
              }
            })
          },
          onCancel() { },
        })
      }
    },
    //批量删除
    onClickDeleteBatch() {
      if (this.selectedRowKeys.length == 0) {
        this.$antdMessage.info('请选择数据！')
        return
      }
      let that = this
      that.$antdConfirm({
        title: '请确定要删除吗?',
        content: `共选中${that.selectedRowKeys.length}条信息`,
        onOk() {
          deleteAction('/sys/user/deleteRecycleBin', { userIds: that.selectedRowKeys.join(',') }).then((res) => {
            if (res.code == 200) {
              that.clearArr()
              that.refresh()
              that.$antdMessage.success('删除成功！')
            } else {
              that.$antdMessage.error(res.message)
            }
          })
        },
        onCancel() { },
      })
    },
    // 改
    onClickEdit(record) {
      this.$refs.formPage.editor(record)
    },
    refresh() {
      this.pagination.current = 1
      this.requestData()
      getAction('/sys/sysDepart/queryTreeList', { tenantId: this.tenantId })
        .then((res) => {
          if (res.code == 200) {
            if (res.result.list && res.result.list.length > 0) {
              let deps = res.result.list
              setTreeData(deps)
              this.departmentTree = deps
            }
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    // 查
    requestData() {
      this.loadingTable = true
      let params = {
        pageNo: this.pagination.current,
        pageSize: this.pagination.pageSize,
        ...this.filterForm,
        ...this.sortForm,
      }

      getAction('/sys/user/queryUserByDepId', { departId: this.departId, ...params })
        .then((res) => {
          if (res.code == 200) {
            this.tableData = res.result || []
            this.pagination.total = res.total
          } else {
            this.$antdMessage.error(res.message)
          }
          this.loadingTable = false
        })
        .catch((err) => {
          this.loadingTable = false
          console.log(err)
        })
    },
    tenantAllUser() {
      this.loadingTable = true
      let params = {
        pageNo: this.pagination.current,
        pageSize: this.pagination.pageSize,
        ...this.filterForm,
        ...this.sortForm,
        tenantId: this.tenantId,
      }

      getAction('/sys/user/queryUserByTenantId', { ...params })
        .then((res) => {
          if (res.code == 200) {
            this.tableData = res.result || []
            this.pagination.total = res.total
          } else {
            this.$antdMessage.error(res.message)
          }
          this.loadingTable = false
        })
        .catch((err) => {
          this.loadingTable = false
          console.log(err)
        })
    },
    initPageInfo() {
      this.getTenantList()
      getAction('/sys/role/queryByTenantId', { tenantId: this.tenantId }).then((res) => {
        if (res.code == 200) {
          this.roleList = res.result || []
        }
      })
      getAction('/mgtTenantInfo/getTenantInfo').then((res) => {
        if (res.code == 200) {
          this.platform = res.result.type
        }
      })
    },
    // 左侧列表
    getTenantList() {
      this.departmentTree = []
      getAction('/sys/sysDepart/queryTreeList', { tenantId: this.tenantId })
        .then((res) => {
          if (res.code == 200) {
            if (res.result.list && res.result.list.length > 0) {
              let deps = res.result.list
              setTreeData(deps)
              this.departmentTree = deps
              if (deps && deps.length > 0 && !this.departId) {
                this.departId = deps[0].id
              }
              if (this.$route.query.departId) {
                this.requestData()
                return
              }
              this.tenantAllUser()
            }
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    onClickTree(key, e) {
      this.departId = e.node.dataRef.id
      console.log('departId', this.departId)
      this.clearArr()
      this.requestData()
    },
    // 排序
    tableChange(pagination, filters, sorter, { currentDataSource }) {
      this.current = 1
      if (sorter.order) {
        let sortType = ''
        if (sorter.order == 'ascend') {
          sortType = 'ASC'
        } else {
          sortType = 'DESC'
        }
        this.sortForm = {
          sortType: sortType,
          sortColumn: sorter.columnKey,
        }
        this.requestData()
      } else {
        this.sortForm = {
          sortType: '',
          sortColumn: '',
        }
        this.requestData()
      }
    },
    // 设置账号状态
    handelChangeStatus(v) {
      this.loadingRowKey = v.id
      putAction('/sys/user/frozenBatch', { ids: v.id, status: v.status == 1 ? 2 : 1 })
        .then((res) => {
          if (res.code == 200) {
            this.requestData()
          } else {
            this.$antdMessage.error(res.message)
          }
          this.loadingRowKey = null
        })
        .catch((err) => {
          console.log(err)
          this.loadingRowKey = null
        })
    },
    // 重置密码
    resetPassword(id) {
      let _that = this
      let userSids = ''
      if (id) {
        userSids = id
      } else {
        if (_that.selectedRowKeys.length > 0) {
          userSids = _that.selectedRowKeys.join(',')
        } else {
          _that.$antdMessage.info('请选择数据！')
          return
        }
      }
      _that.$antdConfirm({
        title: '确定重置用户密码吗？',
        content: '重置后用户的登录密码，将恢复为手机号后六位',
        onOk() {
          putAction('/sys/user/updatePassword', { userSids })
            .then((res) => {
              if (res.code == 200) {
                _that.$antdMessage.success(res.message)
              } else {
                _that.$antdMessage.error(res.message)
              }
            })
            .catch((err) => {
              console.log(err)
            })
        },
        onCancel() { },
      })
    },
    // 筛选
    handleShowFilter() {
      this.$refs.searchModal.openFilter(this.filterForm)
    },
    handleFilter(form) {
      console.log('form是怎样：', form)
      this.pagination.current = 1
      this.filterForm = JSON.parse(JSON.stringify(form))
      this.requestData()
    },
    // 分页
    onChangePage(current, pageSize) {
      this.pagination.current = current
      this.pagination.pageSize = pageSize
      this.requestData()
    },
    /* 打开设置列面板 */
    showColumn() {
      this.showSetColumn = true
      this.$nextTick(() => {
        this.$refs.SetColumn.paramsData(this.columnsValue, this.BUSI_CONST.Entity.USER_MANAGEMENT, this.columns)
      })
    },
    /* 设置列 */
    sureBtn(emitArr) {
      localStorage.setItem(this.BUSI_CONST.Entity.USER_MANAGEMENT, JSON.stringify(emitArr))
      this.columns = getNewColumns(this.columnsValue, emitArr, actionArr)
      this.tableKey += 1
    },
    // table选择
    onSelectChange(selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectedRows = selectedRows
      this.checkBoxStatus()
    },
    // 底部全选
    onCheckAllChange(e) {
      if (e.target.checked) {
        for (let item of this.tableData) {
          this.selectedRowKeys = this.selectedRowKeys.filter((each) => {
            return each != item.id
          })
          this.selectedRowKeys.push(item.id)

          this.selectedRows = this.selectedRows.filter((each) => {
            return each.id != item.id
          })
          this.selectedRows.push(item)
        }
      } else {
        for (let item of this.tableData) {
          this.selectedRowKeys = this.selectedRowKeys.filter((each) => {
            return each != item.id
          })
          this.selectedRows = this.selectedRows.filter((each) => {
            return each.id != item.id
          })
        }
      }
      this.checkBoxStatus()
    },
    // 底部清空
    clearArr() {
      this.selectedRowKeys = []
      this.selectedRows = []
      this.checkBoxStatus()
    },
    checkBoxStatus() {
      if (this.selectedRowKeys.length == 0) {
        this.listIndeterminate = false
        this.listCheckAll = false
      } else {
        let tableIds = []
        for (let item of this.tableData) {
          tableIds.push(item.id)
        }
        let checkValue = this.isInclude(tableIds, this.selectedRowKeys)
        if (checkValue) {
          this.listIndeterminate = false
          this.listCheckAll = true
        } else {
          this.listIndeterminate = true
          this.listCheckAll = false
        }
      }
    },
    isInclude(aa, bb) {
      return aa.every((item) => {
        return bb.some((sub) => {
          return sub === item
        })
      })
    },
  },
}
</script>

<style lang="less" scoped>
@import '~@/assets/less/public.less';

.flex(@jc, @ai, @fd: row) {
  display: flex;
  justify-content: @jc;
  align-items: @ai;
  flex-direction: @fd;
}

.searchWorkOreder {
  .flex(flex-start, center);
  padding: 8px;
}

.btns {
  margin-left: 10px;
}

.right-btn {
  float: right;
  display: flex;
  justify-content: flex-end;
  margin-bottom: 16px;
}

.cardBox {
  .flex(space-between, flex-start);

  .cardOne {
    min-width: 220px;
    margin-right: 16px;
    overflow-y: auto;
    overflow-x: auto;
    box-sizing: border-box;
    height: calc(100vh - 174px);
    background-color: #fff;
  }

  .cardTwo {
    flex: 1;
    height: calc(100vh - 174px);
    background-color: #fff;
  }
}

/deep/.ant-switch-checked {
  background-color: #1abe6b;
}
</style>
